<div class="route">
  <div class="left">
    <i class="back" (click)="goBack()" nz-icon [iconfont]="'icon-back-blue'"></i>
    <app-header-breadcrumb></app-header-breadcrumb>
  </div>
  <div class="right">
    <span *ngIf="search" class="search" (click)="traggleSearch()">
      <i class="search-pre" nz-icon type="search"></i>
      {{ 'BTN.SEARCH' | translate }}
      <i class="search-after" *ngIf="showSearch" nz-icon type="up"></i>
      <i class="search-after" *ngIf="!showSearch" nz-icon type="down"></i>
    </span>
    <button
      nz-button
      nz-tooltip
      *ngIf="action && isCapsule"
      [nzVisible]="isShowTooltip"
      [nzTitle]="'GENERAL.INFO.SUBMIT_AFTER_SAVING' | i18n"
      nzPlacement="left"
      [class.capsule]="firstCapsule"
      [class.shake]="isShake"
      (click)="clickActionBtn()"
      nzType="primary"
      nzShape="round"
      nzSize="default"
    >
      <ng-template [ngTemplateOutlet]="action"></ng-template>
    </button>
    <button
      nz-button
      *ngIf="action && !isCapsule"
      (click)="clickActionBtn()"
      nzType="primary"
      nzShape="round"
      nzSize="default"
      [ngStyle]="btnStyle"
    >
      <ng-template [ngTemplateOutlet]="action"></ng-template>
    </button>
    <ng-template [ngTemplateOutlet]="custom"></ng-template>
    <ng-template [ngTemplateOutlet]="manualVoid"></ng-template>
    <ng-template [ngTemplateOutlet]="payment"></ng-template>
  </div>
</div>
<ng-template *ngIf="showSearch" [ngTemplateOutlet]="search"></ng-template>